<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            margin: 0 auto;
            color: #646464;
            font-size: 16px;
            position: relative;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        a {
            text-decoration: none;
            color: #646464;
            font-size: 16px
        }

        a:hover {
            color: red;
            position: relative;
            top: 0.5px;
        }

        .el-divider--vertical {
            display: inline-block;
            width: 1px;
            height: 100%;
            margin-top: -20px;
            vertical-align: middle;
            position: relative;
        }

        .el-divider--horizontal {
            margin-left: 10px;
        }
        .box-card{
            float: left;
        }
        td>a{
            font-size: 12px;
            margin-top: 20px;
            margin-right: 20px;
            margin-left: 17px;
        }
        th{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div>
    <div style="background-color:#f9f9f9; width: 100%; height: 34px;padding:0 0;padding-top: 10px;overflow: auto">
        <div style="overflow:hidden;margin-left: 400px">
            欢迎光临当当，请 <a href="" style="margin-left: 0;">登录</a>
            <a href="" style="margin-left: 10px">成为会员</a>
            <el-dropdown>
                </el-dropdown-menu>
                <el-divider direction="vertical"></el-divider>
                <a href="">我的云书房</a>
                <el-divider direction="vertical"></el-divider>
            </el-dropdown>
            <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a href="">我的当当</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>我的订单</el-dropdown-item>
                    <el-dropdown-item>购物车</el-dropdown-item>
                    <el-dropdown-item>银铃铛抵现</el-dropdown-item>
                    <el-dropdown-item>我的收藏</el-dropdown-item>
                    <el-dropdown-item>我的余额</el-dropdown-item>
                    <el-dropdown-item>我的评论</el-dropdown-item>
                    <el-dropdown-item>礼券/礼品卡</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a href="">当当拼团</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item disabled>当当拼团</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <a href="">小说投稿</a>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a href="">企业采购</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>大宗采购</el-dropdown-item>
                    <el-dropdown-item>礼品卡采购</el-dropdown-item>
                    <el-dropdown-item>礼品卡激活</el-dropdown-item>
                    <el-dropdown-item>礼品卡使用</el-dropdown-item>
                    <el-dropdown-item>分销/荐购</el-dropdown-item>
                    <el-dropdown-item>礼品卡专区</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a href="">客服服务</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>帮助中心</el-dropdown-item>
                    <el-dropdown-item>自动退换货</el-dropdown-item>
                    <el-dropdown-item>自主发票</el-dropdown-item>
                    <el-dropdown-item>联系客服</el-dropdown-item>
                    <el-dropdown-item>我要投诉</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <a href="">切换无障碍</a>
        </div>
    </div>
    <el-header>Header</el-header>
    <div style="height: 5px ; width: 100%; background-color: red"></div>
    <a href="" style="margin-left: 10%;"><img src="imgs/advertising.jpg" height="60" width="80%"
                                              style="margin:0 auto;margin-top: 10px"></a>
    <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top:0;margin-left: 10%;font-size: 16px">
            <el-breadcrumb-item>xxx</el-breadcrumb-item>
            <el-breadcrumb-item>xxx</el-breadcrumb-item>
            <el-breadcrumb-item>xxx</el-breadcrumb-item>
            <el-breadcrumb-item>xxx</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="overflow: hidden">
            <div style="margin-left: 10%; width: 20%;height:500px;display: inline-block;overflow: hidden">
                <template>
                    <el-carousel indicator-position="outside" height="300px">
                        <el-carousel-item>
                            <img src="imgs/book001.jpg" alt="" width="100%" height="300">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="imgs/book001.jpg" alt="" width="100%" height="300">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="imgs/book001.jpg" alt="" width="100%" height="300">
                        </el-carousel-item>
                    </el-carousel>
                </template>
                <a href=""><img src="imgs/advertising1.jpg" alt="" width="100%"></a>
            </div>
            <div style="width: 40%;height:500px;display:inline-block;margin-top:10px;margin-left:10px;overflow: hidden">
                <p style="font-weight: bold;font-size: 18px;">效率人生（告诉你如何迅速抵达人生的目标）</p>
                <p style="font-size: 12px">了解事物的本质，走上人生的快捷通道。洞悉高效人生的底层逻辑，直达人生目标。</p>
                <p style="font-size: 12px;display: inline;">作者: <a href="" style="color:#1a66b3;font-size: 12px">饭爷</a>著,
                    <a href="" style="color:#1a66b3;font-size: 12px">书田文话</a>出品</p>
                <p style="font-size: 12px;display: inline;">出版社: <a href="" style="color:#1a66b3;font-size: 12px">北京联合出版有限公司</a>
                </p>
                <p style="font-size: 12px;display: inline;">出版时间:2021年08月</p>
                <div class="block">
                    <el-rate v-model="value1" style="display: inline"></el-rate>
                    <p style="font-size: 12px;display: inline;"><a href="">12891</a>条评论</p>
                </div>
                <div style="width: 100%;height: 100px;background-color: #fcfaf7;">
                    <p style="display: inline;font-size: 12px">抢购价</p>
                    <a href="" style="color:#1a66b3;font-size: 12px;margin-left: 10px;display: inline">降价通知</a>
                    <p style="display: inline;font-size: 12px;margin-left: 50px">电子书价</p><br>
                    <p style="display: inline-block">¥</p>
                    <p style="display: inline;font-size: 26px;color: red">24.00</p>
                    <p style="display: inline;font-size: 12px;color: red">(5折)</p>
                    <p style="display: inline-block;margin-left: 35px">¥</p>
                    <a style="display: inline;font-size: 26px;color: #1a66b3" href="">39.23</a><br>
                    <p style="display: inline-block;font-size: 12px">定价</p>
                    <p style="display: inline;font-size: 12px;"><s>39.23</s></p>
                </div>
                <p style="display:inline;ont-size: 12px;">领劵:</p>
                <el-button type="text" @click="dialogTableVisible = true"
                           style="color:white;height: 30px;background-color: #ff6666;padding: 0 0;margin-top: 10px">
                    满100减50
                </el-button>
                <el-dialog title="优惠券" :visible.sync="dialogTableVisible">
                    <img width="300px" height="200px"
                         src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171031%2F74f28680aca64e6a8fc338ad378c9db4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668940177&t=d702f1288c3bfbc5fee07c489bc0f996"
                         alt="">
                    <br>
                    <el-button type="text" @click="open()"
                               style="color:white;height: 30px;width: 50px;background-color: #ff6666;padding: 0 0;margin-top: 10px">
                        领取
                    </el-button>
                </el-dialog>
                <hr style="border: 1px dashed #646464;">
                <p style="display: inline-block;font-size: 12px">配送至</p>
                <el-cascader :options="options"></el-cascader>
                <p style="display: inline; margin-left:10px;margin-right: 10px"><b>有货</b></p>
                <p style="display: inline;">免运费</p>
                <p style="font-size: 12px">服&emsp;务
                    &emsp;&emsp;由“<b>当当</b>”发货，并提供售后服务。 22:25前完成下单，预计明天可送达</p>
                <el-input-number v-model="num" size="mini" controls-position="right" @change="handleChange" :min="1"
                                 :max="10000000"></el-input-number>
                <el-button type="danger" icon="el-icon-shopping-cart-2">加入购物车</el-button>
                <el-button type="danger" plain>立即购买</el-button>
            </div>
            <div style="width: 25%;height:500px;display: inline-block;margin-left: 10px;overflow: hidden">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color: red">卡片名称</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="returnindex()">返回首页
                        </el-button>
                    </div>
                    <div class="text item" style="padding-top: 20px;">
                        <i class="el-icon-medal-1"></i> <a href="" style="font-size: 12px;color: #855758">正品保障</a>
                        <i class="el-icon-loading" style="margin-left: 30%"></i> <a href=""
                                                                                    style="font-size: 12px;color: #855758">服务支持</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-position"></i> <a href="" style="font-size: 12px;color: #855758">差价返还</a>
                        <i class="el-icon-star-off" style="margin-left: 30%"></i> <a href=""
                                                                                     style="font-size: 12px;color: #855758">15天换货</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-present"></i> <a href="" style="font-size: 12px;color: #855758">礼品包装</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-trophy-1"></i> <a href="" style="font-size: 12px;color: #855758">支持7天无理由退货</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-collection"></i> <a href="" style="font-size: 12px;color: #855758">支持礼品卡</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-bell"></i> <a href="" style="font-size: 12px;color: #855758">支持当当V卡</a>
                    </div>
                    <div style="padding-top: 20px">
                        <i class="el-icon-circle-check"></i> <a href=""
                                                                style="font-size: 12px;color: #855758">企业批量采买</a>
                    </div>

                </el-card>
            </div>
        </div>
        <div style="margin-left:10%;" property="评论">
            <div style="width: 250px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-size: 12px">浏览此商品的顾客还浏览了以下商品</span>
                    </div>
                    <div class="text item" style="margin: 0 auto">
                        <img src="imgs/book001.jpg" height="100px" width="100px" alt=""><br>
                        <img src="imgs/book001.jpg" height="100px" width="100px" alt=""><br>
                        <img src="imgs/book001.jpg" height="100px" width="100px" alt="">
                    </div>
                </el-card>
            </div>
            <div style="display: inline-block;overflow: hidden;margin-left:20px;height: 100%">
                <el-tabs style="width: 500px">
                    <el-tab-pane label="商品详情" name="first">
                        <img src="imgs/book001.jpg" height="400px" width="400px" alt=""><br>
                        <img src="imgs/book001.jpg" height="400px" width="400px" alt=""><br>
                        <img src="imgs/book001.jpg" height="400px" width="400px" alt="">
                    </el-tab-pane>
                    <el-tab-pane label="商品评论" name="second">

                    </el-tab-pane>
                    <el-tab-pane label="商品问答" name="third">

                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </el-main>
    <div style="height: 5px ; width: 100%; background-color: red"></div>
    <div style="background-color: #fafafa;width: 100%;height: 79px;">
        <div style="margin-left: 32%;">
            <a href="" style="margin-right: 50px"><img src="imgs/LRJWH4Y~QC0B)69$VLZ6E5K.png" alt=""></a>
            <a href="" style="margin-right: 50px"><img src="imgs/28O3C(58%251%25DTSCH%25%7B%256TXD.png" alt=""></a>
            <a href=""><img src="imgs/07Y%7D2S@R1EP%5BGC2WSSTZ%5DZL.png" alt=""></a>
        </div>
    </div>
    <div style="padding:0 0">
        <el-card class="box-card2" style="height: 170px ; padding-top: 0;margin-top: 0">
                <div style="margin-left: 30%;width: 800px;height: 170px;margin: 0 auto;padding-top: 0;">
                    <table style="font-size: 12px;margin-left: 50px">
                        <tr>
                            <th>购物指南</th>
                            <th>支付方式</th>
                            <th>订单服务</th>
                            <th>配送方式</th>
                            <th>退换货</th>
                            <th>商家服务</th>
                        </tr>
                        <tr>
                            <td><a href="">购物流程</a></td>
                            <td><a href="">网上支付</a></td>
                            <td><a href="">配送服务查询</a></td>
                            <td><a href="">当日递</a></td>
                            <td><a href="">退换货服务查询</a></td>
                            <td><a href="">商家中心</a></td>
                        </tr>
                        <tr>
                            <td><a href="">发票制度</a></td>
                            <td><a href="">礼品卡支付</a></td>
                            <td><a href="">订单状态说明</a></td>
                            <td><a href="">次日达</a></td>
                            <td><a href="">自助申请退换货</a></td>
                            <td><a href="">运营服务</a></td>
                        </tr>
                        <tr>
                            <td><a href="">服务协议</a></td>
                            <td><a href="">银行转帐</a></td>
                            <td><a href="">自助取消订单</a></td>
                            <td><a href="">订单自提</a></td>
                            <td><a href="">退换货进度查询</a></td>
                        </tr>
                        <tr>
                            <td><a href="">会员优惠</a></td>
                            <td><a href="">礼券支付</a></td>
                            <td><a href="">自助修改订单</a></td>
                            <td><a href="">验货与签收</a></td>
                            <td><a href="">退款方式和时间</a></td>
                        </tr>
                    </table>
                </div>
        </el-card>
    </div>
    <div style="height: 1px ; width: 100%;"></div>
    <div>
        <img src="imgs/OD3E2GCQ%60)%60PYEKJ60)8$TC.png" alt="" style="margin-left: 20%">
    </div>

</div>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            value1: "",
            dialogTableVisible: false,
            options: [{
                value: 'sahnxi',
                label: '山西省',
                disabled: false,
                children: [{
                    value: 'taiyuan',
                    label: '太原市',
                    children: [{
                        value: 'wanbailin',
                        label: '万柏林区'
                    }, {
                        value: 'xiaodianqu',
                        label: '小店区'
                    }, {
                        value: 'xinghualingqu',
                        label: '杏花岭区'
                    }, {
                        value: 'jiancaopingqu',
                        label: '尖草坪区'
                    }]
                }]
            }, {
                value: 'beijing',
                label: '北京',
                children: [{
                    value: 'zhaoyangqu',
                    label: '朝阳区',
                }]
            }],
            num: 1
        },
        methods: {
            open() {
                alert("领取成功!");
            },
            handleChange(value) {
                console.log(value);
            },
            returnindex() {
                location.href = "/"
            }
        },
        created: function () {

        }
    })
</script>
</body>
</html>